<!--  -->
<template>
  <div id="notification">
    <div class="notification-title">通知</div>
    <div class="message" v-for="(noti, index) in notifacations" :key="index">
      <div class="message-inner">
        <!-- 关注 -->
        <div class="message-changable" v-if="noti.notificationType==0&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)">{{ noti.userData.userNickname }}</span
          >&nbsp;{{  "关注了你"
          }}&nbsp;
        </div>
        <!-- 点赞帖子 -->
        <div class="message-changable" v-else-if="noti.notificationType==1&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)">{{ noti.userData.userNickname }}</span
          >&nbsp;{{  "点赞了你的帖子"
          }}&nbsp;<span @click="toPost(noti.contextData.postNo)">{{ noti.contextData.postTitle }}</span>
        </div>
        <!-- 收藏帖子 -->
        <div class="message-changable" v-else-if="noti.notificationType==2&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)">{{ noti.userData.userNickname }}</span
          >&nbsp;{{  "收藏了你的帖子"
          }}&nbsp;<span @click="toPost(noti.contextData.postNo)">{{ noti.contextData.postTitle }}</span>
        </div>
        <!-- 点赞评论 -->
        <div class="message-changable" v-else-if="noti.notificationType==3&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)"> {{ noti.userData.userNickname }}</span
          >&nbsp;{{  "点赞了你的评论"
          }}&nbsp;<span>{{ noti.contextData.commentContent }}</span>
        </div>
        <div class="message-changable" v-else-if="noti.notificationType==4&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)"> {{ noti.userData.userNickname }}</span
          >&nbsp;{{  "收藏了你的评论"
          }}&nbsp;<span>{{ noti.contextData.commentContent }}</span>
        </div>
        <div class="message-changable" v-else-if="noti.notificationType==5&&noti.contextData!=null">
          <span @click="toUser(noti.userData.userNo)"> {{ noti.userData.userNickname }}</span
          >&nbsp;{{  "评论了你的帖子"
          }}&nbsp;<span>{{ noti.contextData.postTitle }}</span>
        </div>
        <div class="message-error" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["notifacations"],

  computed: {},

  methods: {
    toUser(no){
      this.$router.push({
        path: "/usercenter",
        query: { userNo: no },
      })
    },
    toPost(no){
      this.$router.push({
        path: "/browsetopic",
        query: { postNo: no },
      })
    }
  },
};
</script>
<style>
#notification {
  width: 360px;
  height: 440px;
  overflow-y: scroll;
  border-radius: 3px;
}
.notification-title {
  font-size: 16px;
  font-weight: 700;
  width: calc(100% - 10px);
  border-bottom: 1px rgb(223, 223, 223) solid;
  padding-bottom: 10px;
  padding-left: 10px;
}
#notification > .message {
  width: calc(100% - 20px);
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px rgb(223, 223, 223) solid;
}
#notification > .message > .message-inner {
  color: rgb(125, 125, 125);
  font-size: 14px;
  font-weight: 500;
}
.message-changable>span:first-child{
  color: rgb(4, 143, 250);
  cursor: pointer;
}
.message-changable>span:last-child{
  color: rgb(4, 143, 250);
  cursor: pointer;
}
.message-error{
  display: none;
}
</style>